<template>
  <div>
    <div class="wrapper">
      <router-link to="/" tag="div" class="iconfont pos">&#xe625;</router-link>
      <div>城市选择</div>
    </div>
    <ul class="head">
      <li>境内</li>
      <li class="head-act">境外·港澳台</li>
    </ul>
    <div class="searchs">
      <input
        class="search-input"
        type="text"
        placeholder="输入城市名或拼音"
        v-model="username"
      />
    </div>
    <!-- 搜索区域 -->
    <div  class="searchList " v-show='username'  ref='search'>
      <ul class="serach">
        <li class="item" v-for="(item, index) in userlist" :key="index" @click="getCity(item)">{{ item }}</li>
        <li class="search-item border-bottom" v-show='lists'>没有找到匹配数据</li>
      </ul>
    </div>
  </div>
</template>
<script>
import Bscroll from "better-scroll";
export default {
  name: "",
  components: {},
  props: ["cities"],
  data() {
    return {
      username: "",
      userlist: [],
    };
  },
  computed: {
    lists(){
      return !this.userlist.length;
    }
  },
  watch: {
    username() {
      var list = [];
      for (let i in this.cities) {
        this.cities[i].forEach((item) => {
          // console.log(item);
          if (
            item.name.indexOf(this.username) > -1 ||
            item.spell.indexOf(this.username) > -1
          ) {
            list.push(item.name);
          }
        });
        this.userlist = list;
      }
    },
  },
  created() {},
  mounted() {
    this.Bscroll = new Bscroll(this.$refs.search);
  },
  methods: {
    getCity(data) {
      console.log(data);
      this.$store.commit("sendInfo", data);
      this.$router.push("/");
    },
  },
};
</script>
<style lang='stylus' scoped>
.wrapper {
  line-height: 0.88rem;
  position: relative;
  background: #00bcd4;
  text-align: center;
  font-size: 0.32rem;
  color: #fff;
  .pos {
    position: absolute;
    left: 0.2rem;
    color: #fff;
  }
}

.head {
  width: 100%;
  height: 0.88rem;
  // line-height: 0.88rem;
  background: #00bcd4;
  display: flex;
  text-align: center;
  padding-left: 15%;
  align-items: center;
  box-sizing: border-box;

  li {
    width: 40%;
    background: #fff;
    height: 0.44rem;
    line-height: 0.44rem;
    border-radius: 0.2rem;
  }

  .head-act {
    background: #999;
    color: #fff;
  }
}

.searchs {
  height: 0.72rem;
  padding: 0 0.1rem;
  background: #00bcd4;

  .search-input {
    box-sizing: border-box;
    width: 100%;
    height: 0.62rem;
    padding: 0 0.1rem;
    line-height: 0.62rem;
    text-align: center;
    border-radius: 0.06rem;
    color: #666;
  }
}

.searchList
        z-index: 1
        overflow: hidden
        position: absolute
        top: 2.58rem
        left: 0
        right: 0
        bottom: 0
        background: #fff
        .item 
          line-height: 0.76rem;
          padding-left: 0.2rem;
          border-top 1px solid #eee
        .search-item
            line-height: .62rem
            padding-left: .2rem
            background: #fff
            color: #666
</style>